<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="650" height="350"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Clear canvas
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    // --- Drawing Parameters ---
    const config = {
        y_points: 100,
        xA: 80,
        scale: 30, // pixels per cm
        dist_AB_cm: 15,
        dist_x_visual_cm: 9.5, // Visual position for P
        pointRadius: 4.5,
        lineWidth: 1.5,
        arrowHeadLength: 10,
        arrowHeadHeight: 5,
        fontA: 'bold 24px Arial',
        fontP: 'bold 24px Arial',
        fontB: 'bold 24px Arial',
        fontX: 'italic 28px serif',
        fontDist: '28px Arial',
        fontFig: 'bold 24px Arial',
    };

    const xP = config.xA + config.dist_x_visual_cm * config.scale;
    const xB = config.xA + config.dist_AB_cm * config.scale;

    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = config.lineWidth;

    // --- Draw Points and Labels (A, P, B) ---
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    
    // Point A
    ctx.font = config.fontA;
    ctx.beginPath();
    ctx.arc(config.xA, config.y_points, config.pointRadius, 0, 2 * Math.PI);
    ctx.fill();
    ctx.fillText('A', config.xA, config.y_points - 10);

    // Point P
    ctx.font = config.fontP;
    ctx.beginPath();
    ctx.arc(xP, config.y_points, config.pointRadius, 0, 2 * Math.PI);
    ctx.fill();
    ctx.fillText('P', xP, config.y_points - 10);

    // Point B
    ctx.font = config.fontB;
    ctx.beginPath();
    ctx.arc(xB, config.y_points, config.pointRadius, 0, 2 * Math.PI);
    ctx.fill();
    ctx.fillText('B', xB, config.y_points - 10);
    
    // --- Draw Dashed Lines ---
    ctx.setLineDash([5, 5]);

    // Horizontal line connecting points
    ctx.beginPath();
    ctx.moveTo(config.xA, config.y_points);
    ctx.lineTo(xB, config.y_points);
    ctx.stroke();

    // Define Y positions for dimension lines
    const y_dim_x_line = config.y_points + 90;
    const y_dim_15_line = config.y_points + 150;

    // Vertical projection lines
    ctx.beginPath();
    ctx.moveTo(config.xA, config.y_points);
    ctx.lineTo(config.xA, y_dim_15_line);
    ctx.stroke();
    
    ctx.beginPath();
    ctx.moveTo(xP, config.y_points);
    ctx.lineTo(xP, y_dim_x_line);
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(xB, config.y_points);
    ctx.lineTo(xB, y_dim_15_line);
    ctx.stroke();

    // --- Draw Solid Dimension Lines and Labels ---
    ctx.setLineDash([]); // Reset to solid line

    // Dimension for 'x'
    const y_x_text = y_dim_x_line - 35;
    ctx.font = config.fontX;
    ctx.textBaseline = 'middle';
    ctx.fillText('x', (config.xA + xP) / 2, y_x_text);
    
    ctx.beginPath();
    // The horizontal line for 'x'
    ctx.moveTo(config.xA, y_dim_x_line);
    ctx.lineTo(xP, y_dim_x_line);
    // Vertical tick at the left end
    ctx.moveTo(config.xA, y_dim_x_line - config.arrowHeadHeight);
    ctx.lineTo(config.xA, y_dim_x_line + config.arrowHeadHeight);
    // Arrowhead at the right end
    ctx.moveTo(xP, y_dim_x_line);
    ctx.lineTo(xP - config.arrowHeadLength, y_dim_x_line - config.arrowHeadHeight);
    ctx.moveTo(xP, y_dim_x_line);
    ctx.lineTo(xP - config.arrowHeadLength, y_dim_x_line + config.arrowHeadHeight);
    ctx.stroke();
    
    // Dimension for '15 cm'
    const y_15_text = y_dim_15_line + 25;
    ctx.font = config.fontDist;
    ctx.fillText('15 cm', (config.xA + xB) / 2, y_15_text);

    ctx.beginPath();
    // The horizontal line for '15 cm'
    ctx.moveTo(config.xA, y_dim_15_line);
    ctx.lineTo(xB, y_dim_15_line);
    // Left arrowhead (pointing outwards)
    ctx.moveTo(config.xA, y_dim_15_line);
    ctx.lineTo(config.xA + config.arrowHeadLength, y_dim_15_line - config.arrowHeadHeight);
    ctx.moveTo(config.xA, y_dim_15_line);
    ctx.lineTo(config.xA + config.arrowHeadLength, y_dim_15_line + config.arrowHeadHeight);
    // Right arrowhead (pointing outwards)
    ctx.moveTo(xB, y_dim_15_line);
    ctx.lineTo(xB - config.arrowHeadLength, y_dim_15_line - config.arrowHeadHeight);
    ctx.moveTo(xB, y_dim_15_line);
    ctx.lineTo(xB - config.arrowHeadLength, y_dim_15_line + config.arrowHeadHeight);
    ctx.stroke();

    // --- Caption ---
    ctx.font = config.fontFig;
    ctx.textBaseline = 'top';
    ctx.fillText('Fig. 5.1', (config.xA + xB) / 2, y_15_text + 35);

</script>
</body>
</html>